<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <script th:src="@{/js/jquery.min.js}"></script>
    <title>单词背诵</title>
    <script th:src="@{/js/review.js}"></script>
    <!-- 在review.html head部分添加 -->
    <link rel="stylesheet" th:href="@{/css/review.css}" />

</head>
<body>
    <div id="quiz-container">
        <!-- 反馈信息 -->
        <div id="feedback" class="feedback"></div>

        <!-- 单词显示区域 -->
        <div id="word-display" class="word-header"></div>

        <!-- 图片展示区域 -->
        <img id="word-image" class="word-image" />

        <!-- 答案按钮网格 -->
        <div id="answer-grid" class="answer-grid"></div>

        <!-- 下一题按钮 -->
        <button id="next-btn" class="next-button" style="display: none;">下一题</button>
        <script th:inline="javascript">   var ctx = /*[[@{/}]]*/ '';/*<![CDATA[*/
            fetch('/student/get/review-data')
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                if (!Array.isArray(data) || data.length === 0) {
                    document.getElementById('word-display').textContent = '无可用单词';
                    return;
                }
                window.words = data;
                currentIndex = 0;
                displayCurrentWord();
            })
            .catch(error => {
                console.error('Fetch error:', error);
                document.getElementById('word-display').textContent = '数据加载失败';
            });
            /*]]>*/
        </script>
    </div>
    <div id="customAlert" class="custom-modal">
        <div class="modal-content">
            <p class="modal-message"></p>
            <div class="modal-footer">
                <button class="modal-btn" id="confirmCancel">取消</button>
                <button class="modal-btn btn-primary" id="confirmBtn">确定</button>
            </div>
        </div>
    </div>
</body>
</html>
